<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>javaScript中的对象</title>
    <style></style>
  </head>
  <body>
    <script>
      // 可以通过两种方式访问对象属性
      /**
       * 1，obiectName.propertName
       * 2, objectName['propertyName']
       *
       */
      // 使用两种方式访问person的年龄
      // var person = {
      //   name: 'John',
      //   age: 31,
      //   favColor: 'green',
      //   height: 183
      // }
      // var x = person.age
      // var y = person['age']
      // alert(x)
      // alert(y)

      //javaScript的内置对象长度属性用于计算属性或字符串中的字符数
      // var course = { name: 'JS', lessons: 54 }
      // console.log(course.name.length)

      // 当创建一个对象后可以用.或[]来更新对象的属性
      // var ourDog = {
      //   name: 'Camper',
      //   legs: 4,
      //   tails: 1,
      //   friends: ['everything']
      // }
      /**
       * 两种方式更新丢向的name属性
       * 1.ourDog.name = 'Happy Camper
       * 2.ourDog['name'] = 'Happy Camper'
       */
      // ourDog.name = 'Happy Camper'
      // ourDog['name'] = 'Happy Camper'
      // //给对象添加属性
      // var ourDog = {
      //   name: 'Camper',
      //   legs: 4,
      //   tails: 1,
      //   friends: ['everything']
      // }

      // 删除对象的属性
      // var ourDog = {
      //   name: 'Camper',
      //   legs: 4,
      //   tails: 1,
      //   friends: ['everything']
      // }
      // var c1 = ourDog['tails']
      // delete ourDog['tails']
      // var c2 = ourDog['tails']
      // console.log(ourDog)

      // 2.对象方法
      /**
       * 对象方法是一个包含函数定义的属性，可以通过以下语法来调用方法
       * 对象名.方法名（）
       * 使用了String对象的toUpperCase（）方法来将文本转换为大写
       */
      // var message = 'Hello world'
      // var x = message.toUpperCase()
      // document.write(x)

      // 使用[]来读取对象的属性
      // var a = 'age'
      // var myObj = {
      //   name: 'Loen',
      //   age: '28',
      //   eat: function() {
      //     return "I'm eating"
      //   }
      // }
      console.log(myObj['name'])
      // 可以用变量访问对象的属性名
      console.log(myObj[a])
      console.log(myObj['eat']())

      // 3.对象构造器
      /**
       * 1使用函数来构造对象
       */
      function person(firsName, lastName, age, eyeColor) {
        this.firstName = firsName
        this.lastName = lastName
        this.age = age
        this.eyeColor = eyeColor
      }
      /**
       * javaScript中，this
       * 通常指的是我们正在执行的函数本省，
       * 或者是指向该函数搜所属的对象
       * 一旦有了对象构造器，就可以创建新的对象是咧
       * myFather和myMather是person对象的实列，他们的属性分配给相应的值
       */
      var myFather = new person('John', 'Doe', 50, 'blue')
      var myMother = new person('Sally', 'Rally', 48, 'green')
      console.log(myFather.age)
      console.log(myMother.firstName)

      // 4.对象初始化
      /**
       * 使用英文大括号{}创建单个对象
       * 无论如何创建对象，访问属性和方法的语法不会更改
       */
      var John = { name: 'John', age: 23 }
      var Loen = { name: 'Loen', age: 28 }
      //  使用对象初始化器的时候，空格和换行符并不重要，对象定义可以跨多行
      var john = {
        name: 'John',
        age: 34
      }
      var loen = {
        name: 'Loen',
        age: 45
      }
      document.write(Loen)
    </script>
  </body>
</html>
